import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import SearchView from '@/components/searchView/index'
import { useLocation, useNavigate } from 'react-router-dom'
import {
  Space,
  Table,
  Button,
  Modal,
  Card,
  message,
  Popconfirm,
  Pagination,
  Checkbox,
  Col,
  Row
} from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import {
  storePreorderedList,
  storePreorderedSerach,
  storePreorderedDelete,
  storePreorderedCreateExcel,
  storePreorderedDetils,
  storePreorderedStatus
} from '@/http/api/store'
import dayjs from 'dayjs'
let pageData = {
  page: 1,
  size: 10,
  total: 0,
  status: 1,
  appid: localStorage.getItem('appid')
}
let typeList = [
  {
    title: '车主姓名',
    type: 'inpute',
    model: 'name'
  },
  {
    title: '车主电话：',
    type: 'inpute',
    model: 'phone'
  },
  {
    title: '车牌品牌：',
    type: 'inpute',
    model: 'carName'
  },
  {
    title: '车牌型号：',
    type: 'inpute',
    model: 'carType'
  },
  {
    title: '车牌号码',
    type: 'inpute',
    model: 'carNo'
  }
]
let checkBoxOptions = [
  {
    label: '已预约',
    value: '0'
  },
  {
    label: '已完成',
    value: '1'
  },
  {
    label: '已取消',
    value: '2'
  }
]
let selectedRowsdata = []
const App = () => {
  const [messageApi, contextHolder] = message.useMessage()
  useEffect(() => {
    getList()
  }, [])
  const Navigate = useNavigate()
  const location = useLocation()
  const [dataSource, setDataSource] = useState([])
  const [isShowDetils, setisShowDetils] = useState(false)
  const [detilsData, setDetilsData] = useState({})

  const columns = [
    {
      title: '预约时间',
      dataIndex: 'time',
      align: 'center'
    },
    {
      title: '客户姓名',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      align: 'center'
    },
    {
      title: '车辆品牌',
      dataIndex: 'carName',
      align: 'center'
    },
    {
      title: '预约状态',
      dataIndex: 'status',
      align: 'center',
      render: (status) =>
        status == 0 ? (
          <div style={{ color: '#57D38D' }}>已预约</div>
        ) : status == 1 ? (
          <div style={{ color: '#0078D7' }}>预约完成</div>
        ) : status == 2 ? (
          <div style={{ color: '#707070' }}>预约取消</div>
        ) : (
          ''
        )
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center'
    },
    {
      title: '车牌号',
      dataIndex: 'carNo',
      align: 'center'
    },
    {
      title: '车架号',
      dataIndex: 'carVIN',
      align: 'center'
    },
    {
      title: '膜品类型',
      dataIndex: 'filmType',
      align: 'center'
    },
    {
      title: '膜品型号',
      dataIndex: 'filmName',
      align: 'center'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setisShowDetils(true)
              getDetilsData(data)
            }}
          >
            详情
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setisShowDetils(true)
              getDetilsData(data)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={() => {
              DeleteFn(data)
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsdata = selectedRows.map((item) => {
        return item._id
      })
    }
  }

  // 获取列表
  const getList = async () => {
    pageData.storeId = location.state.id
    const res = await storePreorderedList(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id,
          time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    )
    pageData.total = res.data.total
  }
  // 获取详情
  const getDetilsData = async (data) => {
    const res = await storePreorderedDetils(data)
    setDetilsData(res.data.res)
    console.log(detilsData)
  }

  const pageChangeFn = (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    getList()
  }
  // 删除
  const DeleteFn = async (data) => {
    const res = await storePreorderedDelete(data)
    messageApi.success(res.data.message)
    getList()
  }
  // 导出
  const exportExcel = async () => {
    let data = {
      id: 'all',
      storeId: location.state.id
    }
    if (selectedRowsdata.length > 0) {
      data = {
        id: selectedRowsdata,
        storeId: location.state.id
      }
    }
    const res = await storePreorderedCreateExcel(data)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '预约.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  // 搜索
  const porpsData = async (data) => {
    pageData = {
      page: 1,
      size: 10,
      total: 0,
      appid: localStorage.getItem('appid'),
      storeId: location.state.id,
      ...data
    }
    const res = await storePreorderedSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  const checkChangeFn = async (data) => {
    pageData.status = data
    const res = await storePreorderedSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 修改状态
  const changeStatusFn = async (value, status) => {
    let data = {
      _id: value.preordered._id,
      status: status
    }
    const res = await storePreorderedStatus(data)
    messageApi.success(res.data.message)
    getList()
  }
  return (
    <div>
      <Card>
        <div className="headerTitle align_center">
          <LeftOutlined
            onClick={() => {
              Navigate(-1)
            }}
            style={{ fontSize: '50px' }}
          ></LeftOutlined>
          <div>门店名称：{location.state.name}</div>
        </div>
        <SearchView typeList={typeList} porpsData={porpsData}></SearchView>
        <div className="headerButton">
          <Checkbox.Group
            options={checkBoxOptions}
            defaultValue={['Pear']}
            onChange={checkChangeFn}
          />
          <div>
            <Button
              type="primary"
              onClick={() => {
                exportExcel()
              }}
            >
              导出信息
            </Button>
          </div>
        </div>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection
          }}
          pagination={false}
          bordered
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
        />
        <div className="Pagin">
          <Pagination
            onChange={pageChangeFn}
            defaultCurrent={pageData.page}
            total={pageData.total}
          />
        </div>
      </Card>
      <Modal
        title="详情"
        open={isShowDetils}
        footer={[]}
        onCancel={() => {
          setisShowDetils(false)
        }}
      >
        <div className="detilsBox">
          <div className="cardBox">
            <div className="title">
              <div>客户信息</div>
            </div>
            <div className="card" style={{ minHeight: '115px' }}>
              <Row>
                <Col span={12} className="detilsSize">
                  <div>客户名称：{detilsData.preordered?.name}</div>
                </Col>
                <Col span={12} className="detilsSize">
                  <div>车牌类型：{detilsData.preordered?.licencePlateType}</div>
                </Col>
                <Col span={12} className="detilsSize">
                  <div>电话：{detilsData.preordered?.phone}</div>
                </Col>
                <Col span={12} className="detilsSize">
                  <div>车牌号：{detilsData.preordered?.carNo}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>车辆品牌：{detilsData.preordered?.carName}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>车辆型号：{detilsData.preordered?.carType}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>车架号：{detilsData.preordered?.carVIN}</div>
                </Col>
              </Row>
            </div>
            <div className="link"></div>
            <div className="title">
              <div>门店信息</div>
            </div>
            <div className="card" style={{ minHeight: '115px' }}>
              <Row>
                <Col span={24} className="detilsSize">
                  <div>门店名称：{detilsData.store?.name}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>负责人：{detilsData.store?.linkman}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>电话：{detilsData.store?.phone} </div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>
                    地址：
                    {detilsData.store
                      ? JSON.parse(detilsData.store.region).join('') +
                        JSON.parse(detilsData.store?.location).address
                      : ''}
                  </div>
                </Col>
              </Row>
            </div>
            <div className="link"></div>
            <div className="title">
              <div>膜品信息</div>
            </div>
            <div className="card" style={{ minHeight: '115px' }}>
              <Row>
                <Col span={24} className="detilsSize">
                  <div>膜品类型：{detilsData.preordered?.filmType}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>型号：{detilsData.preordered?.filmName}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div>部位：{detilsData.preordered?.carApart}</div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div className="link"></div>
                </Col>
                <Col span={24} className="detilsSize">
                  <div style={{ float: 'right' }}>
                    总价格：{detilsData.preordered?.price}
                  </div>
                </Col>
              </Row>
            </div>
            <div className="link"></div>
            <div className="card align_center" style={{ minHeight: '62px' }}>
              <div>
                到店日期：
                {dayjs(detilsData.preordered?.time).format(
                  'YYYY-MM-DD HH:mm:ss'
                )}
              </div>
            </div>
            <div
              className="card align_center"
              style={{ minHeight: '62px', margin: '15px 0 15px 0' }}
            >
              <div>
                预约类型：{' '}
                {detilsData.preordered?.status == 0 ? (
                  <span style={{ color: '#57D38D' }}>已预约</span>
                ) : detilsData.preordered?.status == 1 ? (
                  <span style={{ color: '#0078D7' }}>预约完成</span>
                ) : detilsData.preordered?.status == 2 ? (
                  <span style={{ color: '#707070' }}>预约取消</span>
                ) : (
                  ''
                )}
              </div>
            </div>
          </div>
        </div>
        <div>
          {detilsData.preordered?.status == 0 ? (
            <div className="center">
              <div
                className="ButtonEmpty center"
                style={{ width: '160px', marginRight: '10px' }}
                onClick={() => {
                  setisShowDetils(false)
                  changeStatusFn(detilsData, 2)
                }}
              >
                取消预约
              </div>
              <div
                className="footButton center"
                onClick={() => {
                  setisShowDetils(false)
                  changeStatusFn(detilsData, 1)
                }}
              >
                预约完成
              </div>
            </div>
          ) : (
            ''
          )}

          <div style={{ marginTop: '10px' }}>
            <div
              className="ButtonEmpty center"
              onClick={() => {
                setisShowDetils(false)
              }}
            >
              返回
            </div>
          </div>
        </div>
      </Modal>
      {contextHolder}
    </div>
  )
}
export default App
